<template>
  <view id="setup">
    <view class="img-show">
      <text>头像照片显示</text>
      <switch :checked="indicatorDots" @change="changeIndicatorDots" />
    </view>
    <view class="img-show">
      <text>订阅消息通知</text>
      <uni-icons type="right" size="21" color="#D8CCC6" @click="dialogToggle('订阅消息成功')"></uni-icons>
    </view>
    <view class="img-show">
      <text>退出登录</text>
      <uni-icons type="right" size="21" color="#D8CCC6" @click="dialogToggle('你确定要退出登录吗')"></uni-icons>
    </view>
    <view class="img-show">
      <text>注销当前账号</text>
      <uni-icons type="right" size="21" color="#D8CCC6" @click="dialogToggle('注销账户后将无法使用！')"></uni-icons>
    </view>
    <view>
      <!-- 提示窗示例 -->
      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" :title="msgDingyue" @confirm="dialogConfirm"
          @close="close"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const msgDingyue = ref()

// 获取弹层组件
const popup = ref(null)

const close = () => {
  popup.value.open()
}
const confirm = () => {
  popup.value.close()
}
const open = () => {
  popup.value.open()
}

const indicatorDots = ref < Boolean > true

const dialogToggle = (type) => {
  open()
  msgDingyue.value = type

}

const dialogConfirm = () => {
  console.log('点击确定')
  // 清除本地存储
  uni.clearStorageSync('userInfo')
  // 跳转到登录页面
  uni.navigateTo({
    url: '/pages/login/login'
  })
}
const dialogClose = () => {
  console.log('点击关闭')
}
</script>

<style lang="scss" scoped>
#setup {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;

  font-size: 3.3vw;

  .img-show {
    width: 100%;
    height: 7%;
    padding: 0 5%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 5%;
  }
}
</style>
